/*
 * @Description: 第一章入门
 * @Author: IA ia@ker.center
 * @Date: 2025-02-25 16:26:36
 */
import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
import type { RouteRecordRaw } from "vue-router";

declare module 'vue-router' {
    interface RouteMeta {
        title: string,
        transition?: string
    }
}

// createWebHashHistory 地址头会有#/

const routes: Array<RouteRecordRaw> = [
  {
    path: "/login",
    component: () => import("@/views/Login.vue"),
    meta: {
        title: '登录页面',
        transition: 'animate__fadeIn'
    }
  },
  {
    path: "/",
    component: () => import("@/layouts/Layout.vue"),
    redirect: "/index",
    children: [
      {
        path: "/1th",
        component: () => import("@/views/1th/1.vue"),
      },
      {
        path: "/2th",
        component: () => import("@/views/2th/1.vue"),
      },
      {
        path: "/3th",
        component: () => import("@/views/3th/1.vue"),
      },
      {
        path: "/4th",
        component: () => import("@/views/4th/1.vue"),
      },
      {
        path: "/6th",
        component: () => import("@/views/6th/1.vue"),
      },
      {
        path: "/7th",
        component: () => import("@/views/7th/1.vue"),
      },
      {
        path: "/9th",
        component: () => import("@/views/9th/1.vue"),
        meta: {
            title: '第九章-路由元信息',
        }
      },
      {
        path: "/10th",
        component: () => import("@/views/10th/1.vue"),
        meta: {
            title: '第十章-路由过渡动效',
            transition: 'animate__bounceInLeft'
        }
      },
      {
        path: "/11th",
        component: () => import("@/views/11th/1.vue"),
        meta: {
            title: '第十一章-滚动行为',
            transition: 'animate__flipInX'
        }
      },
      {
        path: "/index",
        component: () => import("@/views/Index.vue"),
        meta: {
            title: 'index',
            transition: 'animate__bounceIn'
        }
      },
      {
        path: "/footer/",
        component: () => import("../components/footer.vue"),
        children: [
          {
            path: "",
            name: "login",
            component: () => import("../components/login.vue"),
          },
          {
            path: "reg",
            name: "reg",
            component: () => import("../components/reg.vue"),
          },
          {
            path: "reg2",
            name: "reg2",
            component: () => import("../components/reg2.vue"),
          },
          {
            path: "reg3/:id",
            name: "reg3",
            component: () => import("../components/reg3.vue"),
          },
        ],
      },
      {
        path: "/root",
        component: () => import("../components/root.vue"),
        // redirect 方式1
        // redirect: '/user1',
        // redirect 方式2
        // redirect: {
        //     path: '/user1'
        // },
        // redirect 方式3 含回调函数
        redirect: (to) => {
          console.log("router index.ts root redirect to: ", to);
          // 返回方式1 直接返回 path
          // return '/user1'
          // 返回方式2 返回对象 可以传参
          return {
            path: "/user1",
            // query: to.query
            query: {
              name: "IA",
            },
          };
        },
        alias: ["/root", "/root1", "/root2"],
        children: [
          {
            path: "/user1",
            components: {
              default: () => import("../components/A.vue"),
            },
          },
          {
            path: "/user2",
            components: {
              bbb: () => import("../components/B.vue"),
              ccc: () => import("../components/C.vue"),
            },
          },
        ],
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    console.log('router index.ts scrollBehavior savePosition: ', savePosition);
    // if (savePosition) {
    //     return savePosition
    // } else {
    //     return {
    //         top: 0
    //     }
    // }
    // 可以异步
    // return new Promise((r) => {
    //     setTimeout(() => {
    //         r({
    //             top: 999999999999
    //         })
    //     }, 2000)
    // })

    return {
        top: 99999999
    }
  },
  routes: routes,
});

export default router;
